/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import LinearGradient from 'react-native-linear-gradient';
import {
  Platform, StyleSheet, Text, View,
  TextInput,TouchableOpacity,Alert,Button,LinearGradient
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  
  render() {
    return (
      <View style={styles.container}>
        {/* Header */}
          
              <View style={styles.HeaderTop}>
                <Text style={styles.headerTopLeft} onPress={(
                  ()=>{
                    // 返回到上层
                    Alert.alert();
                  }
                )()}>
                  取消
                </Text>
                <Text style={styles.headerTopCenter}>
                  验证身份
                </Text>
              </View>
var x,thenButton,TextInputValue;        
          <View>
            <View>
              <Text style={styles.centerTop}>已发送验证码</Text>
            </View>
            <View style={styles.centerBottom}>
              <Text>1883***536</Text>
            </View>
          </View>
          <View style={styles.bottom}>
            <View>
              <TextInput style={styles.bottomInput} plactholder="请输入短信验证码" onPress={()=>{
                if(this.value==""){
                  alert('不能为空');
                  return false;
                }
                if(this.value.test(/^1\d{10}$/)){
                  alert('验证码格式不正确');
                  return false;
                }
                TextInputValue=this.value;
              }}></TextInput>
              <TouchableOpacity activeOpacity={0.5}>
                <button style={styles.buttonStyle} disabled={false} onPress={
                   (()=>{
                    //  查看RN如何操作属性disabled
                     let a=1;
                     if(a==1){
                       return false;
                     }
                      let x=parseInt(this.value);
                      if(x!=60){
                        return false;
                      }
                      thenButton=this;
                      let timer=setInterval(()=>{
                          x--;
                          then.value=x+"秒后重新发送";
                          if(x<=0){
                            a=0;
                            x=60;
                            clearInterval(timer);
                          }
                      },1000)
                   })
                }>
                60秒后重新发送
                </button>
              </TouchableOpacity>
            </View>
            <View onPress={()=>{
              if(!TextInputValue){
                alert("短信码为空")
                return false;
              }
              if(x && x==60 /*&&   thenButton.disabled={false}*/){
                fetch("url",{
                    method:"POST",
                    body:TextInputValue,
                  }).then(function(response){
                  return response.json();
                }).then((data)=>{
                    // 核实验证信息是否正确,【返回的值可能为boolean】
                    let endInfo=JSON.parse(data);
                    if(endInfo.infoPassWord==TextInputValue){
                      // 进入个人中心
                    }
                })
              }
            }
            }>
            <LinearGradient color={['#37C5EB', '#4CA1EE', '#6080F1']} style={{height:150}}>
              <Text>下一步</Text>
            </LinearGradient>
            </View>
          </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
  HeaderTop:{
    height:80,
    backgroundColor:"#F0F0F0",
  },
  headerTopLeft:{
    color:"#3CBFEB",
    fontSize:16,
  },
  headerTopCenter:{
    justifyContent:"center",
    color:"black",
    fontSize:25
  },
  centerTop:{
    fontSize:50,
    textAlign:"center",
    justifyContent:"center"
  },
  centerBottom:{
    fontSize:20,
    textAlign:"center",
    justifyContent:"center"
  },
  bottom:{
    
  },
  bottomInput:{
    color:"#CBCBCB",
    borderStyle:"solid",
    borderColor:"#CBCBCB",
    borderWidth:2,
    borderTopWidth: 0,
    borderLeftWidth:0,
    borderRightWidth:0,
  },
  buttonStyle:{
    backgroundColor:"#DFF7FF",
    color:"#3FC0EB",
    fontSize:14,
    height:18,
    width:100,

  }
});
